import React from 'react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
import { connect } from 'react-redux'

import createApp from 'tempest.js'
import Counter from './components/Counter'
import counter, { increment, decrement } from './modules'

function render(Component) {
  createApp().reducer(counter).view(store => <Component />).run('#root')
}

const App = connect(
  state => ({
    value: state,
  }),
  {
    increment,
    decrement,
  },
)(Counter)

const Routes = () =>
  <BrowserRouter>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
    </div>
  </BrowserRouter>

const Home = () =>
  <div>
    <h2>Home</h2>
    <App />
  </div>

const About = () =>
  <div>
    <h2>About</h2>
  </div>

const Topics = ({ match }) =>
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>
          Rendering with React
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>
          Components
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>
          Props v. State
        </Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic} />
    <Route
      exact
      path={match.url}
      render={() => <h3>Please select a topic.</h3>}
    />
  </div>

const Topic = ({ match }) =>
  <div>
    <h3>{match.params.topicId}</h3>
  </div>

render(Routes)
